<script lang="ts" setup>
import MyBox from '@/components/Common/MyBox.vue'
import { reactive, ref, watch } from 'vue'
const props = defineProps(['data'])

const info = reactive({
  inputInfo: {
    Plan: 0,
    Actual: 0,
    HitRate: 0
  },
  inputFieldInfo: {
    Plan: { label: '' },
    Actual: { label: '' },
    HitRate: { label: '' }
  }
})
watch(
  () => props.data,
  (val) => {
    const { inputInfo } = val
    Object.assign(info, val)
    options.value.series[0].data[0].value = inputInfo['HitRate']
  }
)

const options = ref({
  grid: {
    top: 0
  },
  series: [
    {
      type: 'gauge',
      // 设置成相对的百分比
      center: ['41%', '50%'],
      startAngle: 210,
      endAngle: -30,
      min: 0,
      max: 100,
      splitNumber: 5,
      itemStyle: {
        color: '#58D9F9',
        shadowColor: 'rgba(0,138,255,0.45)',
        shadowBlur: 10,
        shadowOffsetX: 2,
        shadowOffsetY: 2
      },
      progress: {
        show: false,
        roundCap: true,
        width: 18
      },
      pointer: {
        // show: false,
        icon: 'path://M2090.36389,615.30999 L2090.36389,615.30999 C2091.48372,615.30999 2092.40383,616.194028 2092.44859,617.312956 L2096.90698,728.755929 C2097.05155,732.369577 2094.2393,735.416212 2090.62566,735.56078 C2090.53845,735.564269 2090.45117,735.566014 2090.36389,735.566014 L2090.36389,735.566014 C2086.74736,735.566014 2083.81557,732.63423 2083.81557,729.017692 C2083.81557,728.930412 2083.81732,728.84314 2083.82081,728.755929 L2088.2792,617.312956 C2088.32396,616.194028 2089.24407,615.30999 2090.36389,615.30999 Z',
        length: '75%',
        width: 16,
        offsetCenter: [0, '5%']
      },
      axisLine: {
        lineStyle: {
          width: 30,
          color: [
            [0.3, '#fd666d'],
            [0.7, '#e6a23c'],
            [1, '#91c175']
          ]
        }
      },
      axisTick: {
        splitNumber: 2,
        lineStyle: {
          width: 2,
          color: '#999'
        }
      },
      splitLine: {
        length: 12,
        lineStyle: {
          width: 3,
          color: '#999'
        }
      },
      axisLabel: {
        distance: 30,
        color: '#999',
        fontSize: 14
      },
      title: {
        show: false
      },
      detail: {
        show: false,
        backgroundColor: '#fff',
        borderColor: '#999',
        borderWidth: 2,
        width: '60%',
        lineHeight: 40,
        height: 40,
        borderRadius: 8,
        offsetCenter: [0, '35%'],
        valueAnimation: true,
        formatter: function (value) {
          return '{value|' + value.toFixed(0) + '}{unit|%}'
        },
        rich: {
          value: {
            fontSize: 50,
            fontWeight: 'bolder',
            color: '#777'
          },
          unit: {
            fontSize: 20,
            color: '#999',
            padding: [0, 0, -20, 10]
          }
        }
      },
      data: [
        {
          value: 0
        }
      ]
    }
  ]
})
</script>
<template>
  <MyBox class="bad-count" title="达成率">
    <template v-slot:main>
      <div class="-mt-5"><MyChart width="120%" height="360px" :option="options" /></div>
    </template>
    <template v-slot:extra>
      <div class="desc-box flex justify-around">
        <div class="item target" style="color: #5470c6">
          <p>{{ info.inputFieldInfo['Plan'].label }}</p>
          <p>{{ info.inputInfo.Plan || 0 }}</p>
        </div>
        <div class="item actual" style="color: #91c175">
          <p>{{ info.inputFieldInfo['Actual'].label }}</p>
          <p>{{ info.inputInfo.Actual || 0 }}</p>
        </div>
      </div>
      <div class="rate text-center">
        {{ info.inputFieldInfo['HitRate'].label }}<br />
        <span v-if="info.inputInfo.HitRate <= 30" style="color: #fd666d">{{
          (info.inputInfo.HitRate || 0) + '%'
        }}</span>
        <span
          v-else-if="info.inputInfo.HitRate > 30 && info.inputInfo.HitRate <= 70"
          style="color: #e6a23c"
          >{{ (info.inputInfo.HitRate || 0) + '%' }}</span
        >
        <span v-else-if="info.inputInfo.HitRate > 70" style="color: #91c175">{{
          (info.inputInfo.HitRate || 0) + '%'
        }}</span>
        <span v-else style="color: #fff">{{ (info.inputInfo.HitRate || 0) + '%' }}</span>
      </div>
    </template>
  </MyBox>
</template>
<style lang="less" scoped>
.bad-count {
  width: calc(35% - 15px);
}
.desc-box {
  width: 98%;
  position: absolute;
  bottom: 5px;
  left: 1%;
  font-size: 25px;

  p {
    width: 60px;
    &:first-child {
      text-align: center;
      color: #fff;
    }
    &:last-child {
      border-radius: 30px;
      text-align: center;
      font-weight: 500;
    }
  }
}
.rate {
  position: absolute;
  bottom: 68px;
  width: calc(100% - 20px);
  font-size: 25px;
  font-weight: 500;
}
</style>
